<template>
  <div class="bg-white content">
    <div class="submit-verify">
      <div class="box-title">
        {{ isDetail ? '资质材料': '提交资质材料'  }}
      </div>
      <yz-upload
        list-type="picture-card"
        :show-upload-list="false"
        :disabled="isDetail"
        :isRecognize="true" :multiple="false" :show-file-list="false" @change="handleChange" class="avatar-uploader" name="bizLicenseImgFile" :action="postImgUrl"
      >
        <img v-if="imgUrl" :src="imgUrl" class="full-width full-height" />
        <img v-else-if="queryForm.bizLicenseImgUrl" :src="queryForm.bizLicenseImgUrl" class="full-width full-height" />
        <div v-else>
          <a-icon style="font-size: 100px;color: #FFFFFF" :type="loading ? 'loading' : 'plus'" />
        </div>
      </yz-upload>
      <div v-if="!isDetail" class="rules-title"><span class="star-red">*</span> 营业执照上传</div>
      <div v-if="!isDetail" class="tip">(我们将在24小时内为您完成审核，以使您尽快使用)</div>
      <div class="personal-content" v-if="isDetail || isFileSuccess">
        <div class="personam-item">
          <span class="item-title">统一社会信用代码</span>
          <span>{{ queryForm.regNum }}</span>
          <q-btn v-if="!isDetail" flat color="primary" @click="editInfo({ label: '信用代码', type: 'regNum' })">修改</q-btn>
        </div>
        <div class="personam-item">
          <span class="item-title">名称</span>
          <span>{{ queryForm.name }}</span>
          <q-btn v-if="!isDetail" flat color="primary" @click="editInfo({ label: '名称', type: 'name' })">修改</q-btn>
        </div>
        <div class="personam-item">
          <span class="item-title">类型</span>
          <span>{{ queryForm.type }}</span>
          <q-btn v-if="!isDetail" flat color="primary" @click="editInfo({ label: '类型', type: 'type' })">修改</q-btn>
        </div>
        <div class="personam-item">
          <span class="item-title">法人代表</span>
          <span>{{ queryForm.legalPerson }}</span>
          <q-btn v-if="!isDetail" flat color="primary" @click="editInfo({ label: '法人代表', type: 'legalPerson' })">修改</q-btn>
        </div>
        <div class="personam-item">
          <span class="item-title">注册资本</span>
          <span>{{ queryForm.capital }}</span>
          <q-btn v-if="!isDetail" flat color="primary" @click="editInfo({ label: '注册资本', type: 'capital' })">修改</q-btn>
        </div>
        <div class="personam-item">
          <span class="item-title">成立日期</span>
          <span>{{ queryForm.establishDate }}</span>
          <q-btn v-if="!isDetail" flat color="primary" @click="editInfo({ label: '成立日期', type: 'establishDate' })">修改</q-btn>
        </div>
        <div class="personam-item">
          <span class="item-title">住所</span>
          <span>{{ queryForm.address }}</span>
          <q-btn v-if="!isDetail" flat color="primary" @click="editInfo({ label: '住所', type: 'address' })">修改</q-btn>
        </div>
        <div class="personam-item">
          <q-btn color="primary" style="width:180px;" @click="subVerify">{{ isDetail ? '修改' : '提交审核' }}</q-btn>
        </div>
      </div>
    </div>
    <basic-dialog :visible="visible"
                  title="更改信息"
                  min-width="400px"
                  isShowBasicFooter
                  @close="close"
                  @submit="ok"
    >
      <q-form greedy
              ref="myForm"
              class="dialog-content form-inline block margin-t-20">
        <div>
          <yz-input v-model="ruleForm.name"
                    :inputType="inputType"
                    :rules="[0]"
                    :isRange="false"
                    :title="label"
                    :maxlength="maxlength"
          />
        </div>
      </q-form>
    </basic-dialog>
  </div>
</template>

<script>
import YzUpload from './YzUpload'
import _ from 'lodash'
import { submitCompanies, updateCompanies, updateToken } from '../../../../boot/home/home'
import { saveToken, translateToken } from 'yz-help'
import { mapActions, mapGetters, mapMutations } from 'vuex'
import moment from 'moment'

export default {
  name: 'SubmitVerify',
  components: {
    YzUpload
  },
  props: {
    verifyInfo: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      loading: false,
      postImgUrl: 'datacenter/v1/companies/recognize',
      imageUrl: '',
      queryForm: {
        file: '',
        regNum: '',
        name: '',
        type: '',
        legalPerson: '',
        capital: '',
        establishDate: '',
        address: ''
      },
      imgUrl: '',
      visible: false,
      ruleForm: {
        name: ''
      },
      type: '',
      label: '',
      isFileSuccess: false,
      file: null,
      isDetail: false,
      maxlength: 20,
      inputType: 'input'
    }
  },
  watch: {
    verifyInfo: {
      deep: true,
      immediate: true,
      handler (val) {
        this.queryForm = _.cloneDeep(val)
        // 是否是显示详情
        this.isDetail = val.qualificationAuditStatus === 1
      }
    }
  },
  computed: {
    ...mapGetters({
      'userDetail': 'userDetail'
    })
  },
  methods: {
    // 上传文件改变
    handleChange (info) {
      const file = info.file.originFileObj
      this.file = file
      if (info.file.status === 'uploading') {
        this.imagePreview(file)
        this.loading = true
      }
      if (info.file.status === 'done') {
        this.loading = false
        const response = info.file.response
        if (response.code === '1200') {
          this.queryForm = Object.assign(this.queryForm, response.data)
          this.isFileSuccess = true
        }
      }
    },
    // 本地预览图片
    imagePreview (file) {
      // 定义一个文件阅读器
      const reader = new FileReader()
      // 文件装载后将其显示在图片预览里
      reader.onload = (e) => {
        // 将bade64位图片保存至数组里供上面图片显示
        this.imgUrl = e.target.result
      }
      reader.readAsDataURL(file)
    },
    // 编辑本地信息
    editInfo (item) {
      this.visible = true
      this.label = item.label
      this.type = item.type
      this.ruleForm.name = this.queryForm[item.type]
      if (this.type === 'establishDate') {
        this.ruleForm.name = new Date(this.queryForm[item.type])
        this.inputType = 'date'
      } else {
        this.inputType = 'input'
      }
      if (this.type === 'name') {
        this.maxlength = 45
      } else if (this.type === 'capital' || this.type === 'type' || this.type === 'address') {
        this.maxlength = 200
      } else {
        this.maxlength = 20
      }
    },
    // 关闭弹框
    close () {
      this.visible = false
    },
    // 确认本地信息
    ok () {
      this.$refs['myForm'].validate(true).then(res => {
        if (res) {
          this.visible = false
          if (this.type === 'establishDate') {
            this.queryForm[this.type] = moment(this.ruleForm.name).format('YYYY-MM-DD')
          } else {
            this.queryForm[this.type] = this.ruleForm.name
            this.isDetail = false
          }
        }
      })
    },
    // 提交验证
    async subVerify () {
      if (this.isDetail) {
        this.isDetail = false
        this.isFileSuccess = true
      } else {
        this.queryForm.file = this.file
        const params = _.omit(this.queryForm, ['bizLicenseImgUrl'])
        // 如果tenant_id为0,说明公司还未认证
        if (this.userInfo.tenant_id === 0) {
          // 提交公司认证
          const res = await submitCompanies(params)
          if (res) {
            // 认证成功后更新token
            updateToken(res.data).then(res => {
              const response = res.data
              if (response.access_token) {
                // 保存token
                saveToken(response.access_token)
                this.SET_TOKEN(response.access_token)
                // 保存userInfo
                const info = translateToken(response.access_token)
                const authorities = info.authorities
                this.saveCommonInfo(info, authorities)
                this.set_userDetail({ ...this.userDetail, status: '审核中' })
                this.$emit('submitSuccess')
              }
            })
          }
        } else {
          // 否则为修改认证信息
          const res = await updateCompanies(params)
          if (res) {
            this.set_userDetail({ ...this.userDetail, status: '审核中' })
            this.$emit('submitSuccess')
          }
        }
      }
    },
    ...mapMutations({
      'SET_TOKEN': 'SET_TOKEN',
      'set_userDetail': 'SET_USERDETAIL' // 更改权限数组
    }),
    ...mapActions([
      'saveCommonInfo'
    ])
  }
}
</script>

<style scoped lang="scss">
/deep/.ant-upload.ant-upload-select-picture-card {
  width: 500px;
  height: 300px;
  background-color: #f5f7fa;
}
.submit-verify {
  box-sizing: border-box;
  padding: 20px;
  width: 100%;
  color: #252B39;
  .box-title {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 20px;
  }
  .rules-title {
    font-size: 14px;
    margin: 20px 0;

    .star-red {
      color: #e42121;
    }
  }
  .tip {
    font-size: 12px;
    color: #c7c7c7;
  }

  .personal-content {
    font-size: 16px;
    .personam-item {
      line-height: 30px;
      height: 30px;
      margin: 15px 0;
      display: flex;
      .item-title {
        width: 200px;
      }
      span {
        display: inline-block;
      }
      span:nth-of-type(2) {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        width: 300px;
        margin-right: 10px;
      }
      span:nth-of-type(3) {
        cursor: pointer;
      }
    }
  }
}
</style>
